<template>
    <div class="about">
        <div class="nav-title">
            <img src="@/img/pic5.jpg">
            <h1>关于公司</h1>
        </div>
        <div class="supply">
            <el-row>
                <el-col :lg="18"  :sm="24" :xs="24">
                    <div class="hzgs-title">
                        <h2 class="title">关于公司<span>ABOUT US PARTHER</span></h2>
                        <ul>
                            <li><router-link to="/res">企业入驻</router-link></li>
                            <li><router-link to="/vipres">成为vip企业</router-link></li>
                        </ul>
                    </div>
                    <div  class="about-content">
                        <h1>{{ about.title }}</h1>
                        <p>{{ about.intro }}</p>
                        <p v-html="about.detail"></p>
                    </div>
                </el-col>
                <el-col :lg="6" :sm="24" :xs="24">
                    <div class="tgfw">
                        <h1>供需信息</h1>
                        <el-row>     
                            <el-col :lg="24" :sm="24" :xs="24" v-for="(item, index) in orders.purchase" :key="item.orderid">
                                <div>                        
                                    <img :src="item.img1">
                                    <div class="box-font">
                                        <h3>{{ item.goodsname }}</h3>
                                        <p>{{ item.orderNameen }}</p>
                                        <router-link :to="`/pdetails?id=${item.orderid}`">
                                            <el-button type="danger" round>采购订单</el-button>
                                        </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>     
                            <el-col :lg="24" :sm="24" :xs="24" v-for="(item, index) in orders.supply" :key="item.orderid">
                                <div>                        
                                    <img :src="item.img1">
                                    <div class="box-font">
                                        <h3>{{ item.goodsname }}</h3>
                                        <p>{{ item.orderNameen }}</p>
                                        <router-link :to="`/sdetails?id=${item.orderid}`">
                                            <el-button type="success" round>供应订单</el-button>
                                        </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { toRefs, reactive, getCurrentInstance, onMounted } from 'vue'

export default {
    setup() {
        const data = reactive({
            about: {},
            orders: {}
        })

        const { proxy } = getCurrentInstance()

        onMounted(async () => {
            // 平台简介
            await proxy.$axios.get("/api/about", { params: {} })
                .then(function (response) {
                    var arr = JSON.parse(response.data)
                    console.log(arr)
                    for (var v in arr[0]) {
                        if (v == "pic") {
                            data.about.pic = `/src/${arr[0].pic}`
                        } else {
                            data.about[v] = arr[0][v]
                        }
                    }
                    const regex = /src="([^"]*)"/g;
                    const match = data.about.detail.match(regex);
                    let i = 1
                    for (var value of match) {
                        data.about.detail = data.about.detail.replace(value, `src="/src/img/new${i}.png"`)
                        if (i == 4) {
                            i = 0
                        }
                        i++
                    }
                    console.log(match)
                    console.log(data.about.detail)
                })
                .catch(function (error) {
                    console.log(error);
                });

            // 获取订单信息
            await proxy.$axios.get("/api/orders", { params: {} })
                .then(function (response) {
                    var arr = JSON.parse(response.data)
                    for (var obj in arr) {
                        for (var v of arr[obj]) {
                            v.img1 = `/src/${v.img1}`
                        }
                    }
                    data.orders = arr
                })
            })

        return {
            ...toRefs(data)
        }
    }
}
</script>

<style>
.about .supply .el-row .el-col .title { border: 0px; }
.about-content h1 { text-align: center; line-height: 40px; margin: 20px 0px; }
.about-content p { font-size: 14px; line-height: 25px; margin: 5px 0px; }
.about-img img { width: 45%; height: auto; margin: 20px 10px; }
.hzgs-title ul li:hover { background-color: skyblue; font-size: 18px; }

.about-content p img {
    max-width: 200px !important;
    height: auto !important;
}
</style>



